<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="log"
      width="70%"
      :before-close="resetForm"
    >
      <!-- 内容区域 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="innerVisible = true"
            >类目选择</el-button
          >
          <span class="leimu">{{ ruleForm.category }}</span>
        </el-form-item>

        <el-form-item label="商品名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>

        <el-form-item label="商品数量" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>

        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="ruleForm.sellPoint"></el-input>
        </el-form-item>

        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="innerVisibleImg = true"
            >上传图片</el-button
          >
          <img :src="ruleForm.image" width="100px" alt="" />
        </el-form-item>

        <el-form-item label="商品描述" prop="descs">
          <Wangeditor ref="myEditor" @sendEditor="sendEditor"></Wangeditor>
        </el-form-item>
        <!-- 规格参数配置 -->
        <el-form-item label="规格参数配置" v-show="isshow">
          <el-form
            ref="dynamicValidateForm"
            label-width="120px"
            class="demo-dynamic"
          >
            <!-- groups=[{title:'',value:'',children:[]},...] -->
            <el-form-item
              v-for="(item, index) in groups"
              :label="item.title"
              :key="index"
              :prop="item.title"
            >
              <el-input v-model="item.value"></el-input>
              <!-- 内层的表单项 -->
              <el-form-item
                v-for="(ele, i) in item.children"
                :label="ele.title + i"
                :key="i"
                :prop="ele.value"
              >
                <el-input v-model="ele.value"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-form-item>
      </el-form>

      <!-- 底部内容 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 内弹框 -->
    <el-dialog
      width="30%"
      title="类目选择"
      :visible.sync="innerVisible"
      append-to-body
    >
      <TreeGoods @sedTree="sedTree" />
      <div class="btn">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="getTree">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 内弹框上传图片 -->
    <el-dialog
      width="30%"
      title="上传图片"
      :visible.sync="innerVisibleImg"
      append-to-body
    >
      <UploadImg @sednImg="sednImg" />
      <div class="btn">
        <el-button @click="innerVisibleImg = false">取 消</el-button>
        <el-button type="primary" @click="showImg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from "./TreeGoods.vue";
import UploadImg from "./UploadImg.vue";
import Wangeditor from "./Wangeditor.vue";
export default {
  components: {
    TreeGoods,
    UploadImg,
    Wangeditor,
  },
  props: ["dialogVisible", "title", "rowData"],

  data() {
    return {
      isshow: false,
      innerVisibleImg: false,
      innerVisible: false,
      log: this.dialogVisible,
      treeData: {},
      imgUrl: "",
      ruleForm: {
        id: "",
        title: "", //名称
        price: "", //价格
        num: "", //数量
        sellPoint: "", //卖点
        image: "", //图片
        descs: "", //描述
        cid: "",
        category: "", //类目
      },
      groups: [], //规格参数
      rules: {
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "change" }],
        num: [{ required: true, message: "请输入数量", trigger: "change" }],
      },
    };
  },
    watch: {
      rowData(val) {
        console.log("数据变化", val);
        this.ruleForm = val;
        this.$nextTick(() => {
          this.$refs.myEditor.editor.txt.html(val.descs);
        });
        if (val.paramInfo) {
          this.isshow = true;
          this.groups = JSON.parse(val.paramInfo);
        } 
      },
    },
  methods: {
    sendEditor(val) {
      this.ruleForm.descs = val;
    },
    showImg() {
      this.innerVisibleImg = false;
      this.ruleForm.image = this.imgUrl;
       this.$refs.upload.fileList = [];
    },
    sednImg(val) {
      console.log("显示图片得地址", val);
      this.imgUrl = val;
    },
    //tree数据
    getTree() {
      this.innerVisible = false;
      this.ruleForm.category = this.treeData.data.name;
      this.ruleForm.cid = this.treeData.data.cid;

      this.$api
        .categoryData({
          cid: this.treeData.data.cid,
        })
        .then((res) => {
          console.log("规格参数获取", res.data);
          console.log(this.treeData.data.name);
          if (res.data.status === 200) {
            this.isshow = true;
            let result = res.data.result[res.data.result.length - 1];
            console.log(result.paramData);
            this.groups = JSON.parse(result.paramData);
      
          } else {
            this.isshow = false;
          }
        });
    },
    sedTree(val) {
      this.treeData = val;
       console.log("tree数据", val);
    },
    close() {
      this.$emit("changeDialog");
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("获取输入的信息", this.ruleForm);
           console.log('规格参数配置信息',this.groups);
          let {
            title,
            price,
            num,
            sellPoint,
            image,
            descs,
            cid,
            category,
            id,
          } = this.ruleForm;
          if (this.title == "添加商品") {
            console.log("添加商品");
            this.$api
              .addGoods({
                title,
                price,
                num,
                sellPoint,
                image,
                descs,
                cid,
                category,
                paramInfo: JSON.stringify(this.groups),
              })
              .then((res) => {
                console.log("添加成功", res.data);
                if (res.data.status === 200) {
                  this.resetForm();
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.$parent.http(1);
                }
              });
          } else {
            console.log("编辑商品");
            this.$api
              .updateGoods({
                id,
                title,
                price,
                num,
                sellPoint,
                image,
                descs,
                cid,
                category,
                paramsInfo:JSON.stringify(this.groups)
              })
              .then((res) => {
                if (res.data.status === 200) {
                  this.$parent.http(1);
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.resetForm();
                } else {
                  console.log("修改失败");
                }
              });
          }
        } else {
          console.log("错误!!!!!");
          return false;
        }
      });
    },
  
    resetForm() {
      this.$emit("changeDialog");
      this.ruleForm = {
        title: "", //名称
        price: "", //价格
        num: "", //数量
        sellPoint: "", //卖点
        image: "", //图片
        descs: "", //描述
        cid: "",
        category: "", //类目
      };
      this.$refs.myEditor.editor.txt.clear();
      this.groups = [];
      this.isshow = false;
    },
  },
  created() {},
};
</script>

<style>
.leimu {
  margin-left: 20px;
}
.upload-demo {
  height: 170px;
}
.btn {
  text-align: right;
}
</style>